<template>
	<view v-if="formData.status != undefined">
		<uni-notice-bar
		:background-color="useStateFormat.bgColor"
		:color="useStateFormat.color" 
		showIcon 
		:text="`通知：${useStateFormat.text}，${(formData.status == 0 || formData.status == 1)?'不允许再次编辑':formData.feedback+'，修改后可再次提交'}。`"></uni-notice-bar>
	</view>
	
	<view class="editLayout">
		<view class="row">
			<view class="head">
				<view class="title">鸡汤类型</view>				
			</view>
			<view class="body">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio :disabled="disabled || statusDisabled" :value="0" color="#4F9153" :checked="formData.soup_type==0"></radio>毒鸡汤
					</label>
					<label class="radio">
						<radio :disabled="disabled || statusDisabled" :value="1" color="#f83162" :checked="formData.soup_type==1"></radio>心灵鸡汤
					</label>
				</radio-group>
			</view>
		</view>
		
		<view class="row">
			<view class="head">
				<view class="title">鸡汤内容</view>
				<text class="subTitle">
					1.一行不超过12个字，最多5行\n
					2.毒鸡汤、心灵鸡汤、有感而发均可\n
					3.提交后管理员审核，有可能会微调
				</text>
			</view>
			<view class="body">
				<textarea :disabled="disabled || statusDisabled" v-model="formData.content" class="soupConent" placeholder="编写你的鸡汤吧~~"></textarea>
			</view>
		</view>
		
		
		<view class="row">
			<view class="head">
				<view class="title">添加出处</view>
				<text class="subTitle">
					如果是摘抄的，建议添加出处
				</text>
			</view>
			<view class="body">
				<input :disabled="disabled || statusDisabled" v-model="formData.from" class="fromIpt" type="text" placeholder="如:《红楼梦》">
			</view>
		</view>
		
		
		<view class="row btnGroup">			
			<view class="body">
				<button type="primary" @click="onSubmit" :disabled="statusDisabled">提交审核</button>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref,computed } from 'vue';
import {showToast,stateFormat} from "@/utils/common.js"
import {removeHtmlTags} from "@/utils/tools.js"
import {onLoad} from "@dcloudio/uni-app"

const useStateFormat =  computed(()=>stateFormat(formData.value.status));

const db = uniCloud.database();
const formData = ref({
	soup_type:0,
	content:"",
	from:""
})
const disabled = ref(false);
const statusDisabled = ref(false);
let id;

onLoad((e)=>{	
	id = e.id
	if(id){
		uni.showLoading({
			title:"加载中...",
			mask:true
		})
		getDetail();
		uni.setNavigationBarTitle({
			title:"编辑鸡汤"
		})
	}
})


const radioChange = (e)=>{
	console.log(e);
	formData.value.soup_type = Number(e.detail.value);
}


const onSubmit = async ()=>{
	try{
		disabled.value = true;
		uni.showLoading({
			title:"提交中"
		})
		formData.value.content = removeHtmlTags(formData.value.content);	
		if(formData.value.content==="") return showToast('鸡汤内容不能为空',"none",false);		
		let errCode,res
		let {soup_type,status,content,from} = formData.value;
		let _formData = {soup_type,status:0,content,from,last_modify_date:Date.now()};
		if(id){			
			res = await db.collection("soup-chicken").doc(id).update(_formData);			
		}else{
			res = await db.collection("soup-chicken").add(formData.value);
		}		
		errCode = res.result.errCode;
				
			
		if(errCode === 0){
			uni.$emit("soupUpdate",{msg:"更新了"});
			showToast("发表成功","success");			
			setTimeout(()=>uni.navigateBack(),1000)			
		}		
	}catch(e){		
		showToast(e.errMsg,"error")
	}finally{
		uni.hideLoading();
		disabled.value = false;
	}	
	
}


//获取单条数据
const getDetail = async()=>{
	let {result:{errCode,data}} = await db.collection("soup-chicken").where({_id:id}).get({
		getOne:true
	});
	if(errCode === 0){
		formData.value = data
		if(formData.value.status !==2) statusDisabled.value = true;
	}
	uni.hideLoading()
}
</script>

<style lang="scss" scoped>
.editLayout{
	padding:30rpx;
	.row{
		padding-bottom:30rpx;
		.head{
			padding:20rpx 0;
			.title{
				font-size: 34rpx;
				padding-left:20rpx;
				position: relative;
				padding-bottom:6rpx;
				&::before{
					content: "";
					display: block;
					width: 8rpx;
					height: 30rpx;
					background: $brand-theme-color;
					position: absolute;
					left:0;
					top:calc(50% - 15rpx);
					border-radius: 10rpx;
				}
			}
			.subTitle{
				font-size: 26rpx;
				color:$text-font-color-3;
			}
		}
		.body{
			.radio{
				margin-right:30rpx;
				radio{
					transform: scale(0.9);
				}
			}
			.soupConent{
				border:1px solid $border-color;
				width: 100%;
				height: 400rpx;
				background: #FCFCFC;
				padding:20rpx;
				border-radius: 10rpx;
				font-size: 50rpx;
			}
			.fromIpt{
				border:1px solid $border-color;
				height: 80rpx;
				padding:0 20rpx;
				border-radius: 10rpx;
				background: #FCFCFC;
			}
		}
	}
	
	.btnGroup{
		padding-top:60rpx;
	}
}

[disabled]:not(button){
	color:#bbb;
}
</style>
